<template>
  <div class="wrap">
    <u-sticky>
      <div class="tab_bar">
        <u-tabs :list="groupConfig" line-color="#1890ff" line-height="8rpx" line-width="60rpx" @click="selectTabFn">
          <template #right>
            <div
              class="icon_filter flex_cen_cen"
              @tap="showFilterRef.change"
            >
              <Icon name="icon-shaixuan" size="48" />
            </div>
          </template>
        </u-tabs>
      </div>
    </u-sticky>
    <div class="list">
      <template v-if="isShow">
        <AutoList
          :params="{TypeId: params.materialTypeId, Title: params.searchKey, GroupId: params.materialGroupId, PublishStatus: true, OrderColumn: params.sortType}"
          :request="getMaterialList"
          @list="materialTypeList = $event"
        >
          <div
            v-for="item in materialTypeList"
            :key="item.materialId"
            class="list_item mt16"
            @tap="(pageTitle === '文档' || pageTitle === '音频') ? Router.push('gl_market_details', {pageTitle, materialId: item.materialId, content: item.content}) : Router.push('articleInfo', {pageTitle, materialId: item.materialId, cover: item.cover})"
          >
            <div :class="['item_one', pageTitle === '话术' ? 'item_huashu' : '']">
              <div v-if="pageTitle !== '话术'" class="flex_sb">
                <div class="item_text">{{ item.title }}</div>
                <Icon v-if="pageTitle === '音频' || pageTitle === '文档'" :name="iconName(item.content)" size="120" />
                <Image v-else :name="(pageTitle === '彩页' || pageTitle === '软文') ? `${item.cover}`:`${baseUrl}/${item.cover}`" :overspread="true" size="120" />
              </div>
              <div v-else class="item_text" style="width: 100%">{{ item.title }}</div>
              <div class="item_time mt16">发布于{{ item.publishTime }}</div>
            </div>
            <div v-if="pageTitle !== '话术'" class="item_two flex_sb_cen">
              <div class="flex_sb_cen">
                <Icon :styles="{marginRight: '8rpx'}" name="icon-reading" size="30" />
                <span>{{ item.totalReadingCount }}</span>
              </div>
              <div class="flex_sb_cen">
                <Icon :styles="{marginRight: '8rpx'}" name="icon-like" size="28" />
                <span>{{ item.totalLikingCount }}</span>
              </div>
              <div class="flex_sb_cen">
                <Icon :styles="{marginRight: '8rpx'}" name="icon-fenxiang1" size="26" />
                <span>{{ item.totalTransferringCount }}</span>
              </div>
              <div class="flex_sb_cen" @tap.stop="jumpToPageFn(item)">
                <Icon :styles="{marginRight: '8rpx'}" name="icon-biaodan" size="26" />
                <span style="color: #1890ff;">{{ item.formCount }}</span>
              </div>
            </div>
          </div>
        </AutoList>
      </template>
      <template v-if="isShow1">
        <AutoList
          ref="autoListRef"
          :params="{typeId: params.materialTypeId, title: params.searchKey, groupId: params.materialGroupId, orderColumn: params.sortType}"
          :request="getMaterialList"
          height="100vh"
          @list="materialTypeList = $event"
        >
          <div v-if="isShow1" class="flex_sb_cen" style="flex-wrap: wrap;">
            <div
              v-for="item in materialTypeList"
              :key="item.materialId"
              class="list_item1 mt24"
              @tap="pageTitle === '视频' ? Router.push('gl_market_details', {pageTitle, materialId: item.materialId, cover: item.cover}) : showPosterFn(item)"
            >
              <div class="item_one1">
                <div class="item_img1">
                  <Image :name="pageTitle === '视频' ? `${baseUrl}/${item.cover}`: `${baseUrl}/${item.content}`" height="380" width="339" />
                </div>
                <div style="padding: 18rpx 20rpx 10rpx;">
                  <div class="item_text1 textLineHidden">{{ item.title }}</div>
                  <div class="item_time1">发布于{{ item.publishTime }}</div>
                </div>
              </div>
              <div class="item_two1 flex_sb_cen">
                <div class="flex_sb_cen">
                  <Icon :styles="{marginRight: '8rpx'}" name="icon-fenxiang1" size="26" />
                  <span>{{ item.totalTransferringCount }}</span>
                </div>
                <div class="flex_sb_cen">
                  <Icon :styles="{marginRight: '8rpx'}" name="icon-xiazai" size="28" />
                  {{ item.totalDownloadingCount }}
                </div>
                <div class="flex_sb_cen" @tap.stop="jumpToPageFn(item)">
                  <Icon :styles="{marginRight: '8rpx'}" name="icon-biaodan" size="26" />
                  <span style="color: #1890ff;">{{ item.formCount }}</span>
                </div>
              </div>
            </div>
          </div>
        </AutoList>
      </template>
    </div>
    <Drawer ref="showFilterRef" mask>
      <div :style="{paddingBottom: `${storeState.bottomSafeDis}rpx`, borderRadius: '32rpx 32rpx 0rpx 0rpx', backgroundColor: '#fff'}" class="popup_box">
        <div class="popup_title">
          <div>筛选</div>
          <div class="icon_close" @tap="showFilterRef.change">
            <Icon name="icon-shanchu-4" size="28" />
          </div>
        </div>
        <div class="popup_body">
          <div class="popup_name">关键词</div>
          <div class="popup_input">
            <up-input
              v-model="keyword"
              :custom-style="{background: '#F5F6F7'}"
              border="surround"
              placeholder="请输入内容"
              prefix-icon="search"
              shape="circle"
            />
          </div>
          <template v-if="isShow2">
            <div class="popup_name" style="margin-bottom: 0">排序</div>
            <div class="flex_start flex_wrap">
              <div :class="['type_item1', sortTypeName === 'default' ? 'active' : '']" @tap="sortTypeName = 'default'">默认</div>
              <div :class="['type_item2', sortTypeName === 'views' ? 'active' : '']" @tap="sortTypeName = 'views'">浏览量由多到少</div>
              <div :class="['type_item2', sortTypeName === 'likeCount' ? 'active' : '']" style="margin-right: 0" @tap="sortTypeName = 'likeCount'">点赞量由多到少</div>
              <div :class="['type_item3', sortTypeName === 'share' ? 'active' : '']" style="margin-right: 16rpx" @tap="sortTypeName = 'share'">分享次数由多到少</div>
              <div :class="['type_item3', sortTypeName === 'forms' ? 'active' : '']" @tap="sortTypeName = 'forms'">表单数量由多到少</div>
            </div>
          </template>
        </div>
        <div class="flex_sb_cen popup_body" style="margin-top: 60rpx;">
          <button class="btn_solid" @tap="resetFn">重置</button>
          <button class="btn_primary" @tap="confirmFn">确认</button>
        </div>
      </div>
    </Drawer>
    <u-popup :close-on-click-overlay="false" :show="showPoster" bg-color="transparent" mode="center" overlay-opacity="0.65" @close="showPoster = false">
      <div class="popup_icon">
        <Icon name="icon-close" size="60" @tap="showPoster = false" />
      </div>
      <div class="flex_cen_cen">
        <Image :name="posterUrl" height="896" oss type="png" width="538" />
      </div>
      <div class="flex_cen_cen">
        <button class="pop_btn" open-type="share" style="margin-right: 56rpx;" @tap="shareFn">
          <div class="flex_cen_cen">
            <Icon name="icon-fenxiang-copy" size="36" />
            <span style="margin-left: 8rpx">分享</span>
          </div>
        </button>
        <button class="pop_btn" @tap="downloadFn">
          <div class="flex_cen_cen">
            <Icon name="icon-xiazai-copy" size="36" />
            <span style="margin-left: 8rpx">下载</span>
          </div>
        </button>
      </div>
    </u-popup>
  </div>
</template>
<script lang="ts" setup>
import Icon from '@C/Icon.vue'
import { computed, reactive, ref } from 'vue'
import { obj_oto_query, onLoad, onShow, onShareAppMessage, Router, storeState } from '@U/common'
import { getToken, weixinSubscription } from '@U/Auth'
import Image from '@C/Image.vue'
import download from '@U/download'
import { getMaterialGroupList, getMaterialTypeList, addDownloadingCount, getMaterialList } from '@P_GL/ZhiKe/margetCenter/request'
import { MsgLoading, MsgLoadingClear } from '@C/Msg'
import AutoList from '@C/AutoList.vue'
import { addShareCount, getMaterialDetails, getMaterialDetailsCommon } from '@P/Article/request'
import Drawer from '@C/Drawer.vue'

const baseUrl = import.meta.env.VITE_SHOUDAO_IMG_URL
const groupConfig = ref([])
const isShow = computed(() => (pageTitle.value === '彩页' || pageTitle.value === '软文' || pageTitle.value === '文档' || pageTitle.value === '话术' || pageTitle.value === '音频'))
const isShow1 = computed(() => (pageTitle.value === '海报' || pageTitle.value === '图片' || pageTitle.value === '视频'))
const isShow2 = computed(() => (pageTitle.value === '彩页' || pageTitle.value === '文档' || pageTitle.value === '软文'))
const iconName = computed(() => (docUrl: string) => {
  if (pageTitle.value === '音频') return 'icon-yinpin'
  if (pageTitle.value === '文档') {
    let temp = ''
    switch (docUrl.split('.')[1]) {
      case 'pdf': temp = 'icon-pdf-2'; break
      case 'doc':
      case 'docx': temp = 'icon-word-2'; break
      case 'xls':
      case 'xlsx': temp = 'icon-excel-2'; break
      case 'ppt':
      case 'pptx': temp = 'icon-ppt-2'; break
    }
    return temp
  }
})
// 获取素材分组列表
const getMaterialGroupListFn = async () => {
  groupConfig.value = [{ materialGroupId: '', materialTypeId: params.materialTypeId, name: '全部' }]
  await MsgLoading()
  const { data } = await getMaterialGroupList().finally(() => MsgLoadingClear())
  data.forEach((item: array) => {
    const filterArr = item.filter((item1: object) => item1.materialTypeId === params.materialTypeId)
    if (filterArr.length > 0) {
      filterArr.forEach((item2: any) => groupConfig.value.push(item2))
    }
  })
}
const params = reactive({
  materialId: '',
  materialTypeId: 1,
  searchKey: '',
  materialGroupId: '',
  sortType: 0,
})
const selectTabFn = (item: object) => {
  weixinSubscription()
  params.materialGroupId = item.materialGroupId
}
const keyword = ref('')
const resetFn = () => {
  keyword.value = ''
  sortTypeName.value = 'default'
}
const confirmFn = () => {
  weixinSubscription()
  params.searchKey = keyword.value
  switch (sortTypeName.value) {
    case 'default': params.sortType = 0; break
    case 'views': params.sortType = 1; break
    case 'likeCount': params.sortType = 2; break
    case 'share': params.sortType = 4; break
    case 'forms': params.sortType = 5; break
  }
  showFilterRef.value.change()
}
const posterUrl = ref('')
const articleInfo = ref({})
const showPosterFn = async (item: object) => {
  weixinSubscription()
  console.log('item', item)
  articleInfo.value = item
  articleInfo.value.pageTitle = pageTitle.value
  posterUrl.value = `${import.meta.env.VITE_SHOUDAO_IMG_URL}/${item.content}`
  showPoster.value = true
  let api: any
  getToken() ? (api = getMaterialDetails) : (api = getMaterialDetailsCommon)
  const { data } = await api({ materialId: articleInfo.value.materialId }).finally(() => {})
  articleInfo.value.transferIsChannelAgent = data.transferIsChannelAgent
  articleInfo.value.transferAccountId = data.transferAccountId
  articleInfo.value.transferMobile = data.transferMobile
}
const showFilterRef = ref()
const materialTypeList = ref([])
const showPoster = ref(false)
const sortTypeName = ref('default')
const pageTitle = ref('')
onLoad((options: any) => {
  // 分享给朋友
  onShareAppMessage(() => ({
    path: `/page_gl/ZhiKe/margetCenterDetails?${obj_oto_query(articleInfo.value)}`,
    title: articleInfo.value.title,
    imageUrl: posterUrl.value,
  }))
  if (options.open) {
    posterUrl.value = `${import.meta.env.VITE_SHOUDAO_IMG_URL}/${options.img}`
    showPoster.value = true
  }
  uni.setNavigationBarTitle({
    title: options.title,
  })
  pageTitle.value = options.title
  params.materialTypeId = Number(options.id)
  params.materialId = options.materialId
  getMaterialGroupListFn()
})
const jumpToPageFn = (item: object) => {
  if (item.formCount === 0) return
  Router.push('gl_market_form', { materialId: item.materialId })
}
const shareFn = async () => {
  console.log('articleInfo.value', articleInfo.value)
  await addShareCount({ materialId: articleInfo.value.materialId || params.materialId }).finally(() => {})
  autoListRef.value.getData({ pageNumber: 1 })
}
const autoListRef = ref()
const downloadFn = async () => {
  download(posterUrl.value, true, false, true)
  await addDownloadingCount({ materialId: articleInfo.value.materialId || params.materialId }).finally(() => {})
  autoListRef.value.getData({ pageNumber: 1 })
}
onShow(() => {
  weixinSubscription()
})
</script>

<style lang="less" scoped>
.wrap {
  .tab_bar {
    height: 88rpx;
    padding-left: 40rpx;
    margin-top: 2rpx;
    background-color: #fff;
    .icon_filter {
      width: 96rpx;
      height: 88rpx;
      background: #FFFFFF;
      box-shadow: -4rpx 0rpx 4rpx 0rpx rgba(0,0,0,0.1);
    }
  }
  .list {
    height: calc(100vh - 90rpx);
    padding: 0 24rpx;
    .list_item, .list_item3 {
      background: #FFFFFF;
      border-radius: 24rpx;
      padding: 26rpx 28rpx 16rpx;
      .item_one {
        padding: 0 0 18rpx 14rpx;
        border-bottom: 2rpx solid #E5E5E5;
        .item_text {
          width: 494rpx;
          font-size: 32rpx;
          font-weight: 400;
          color: rgba(0,0,0,0.85);
          line-height: 40rpx;
        }
        .item_img {
          width: 120rpx;
          height: 120rpx;
          background-color: #ccc;
        }
        .item_time {
          font-size: 24rpx;
          font-weight: 400;
          color: rgba(0,0,0,0.25);
          line-height: 34rpx;
        }
      }
      .item_huashu {
        border-bottom: 0;
        padding-bottom: 0;
      }
      .item_two {
        font-size: 24rpx;
        font-weight: 400;
        color: rgba(0,0,0,0.45);
        line-height: 34rpx;
        padding: 14rpx 0 0 14rpx;
      }
    }
    .list_item1 {
      width: 339rpx;
      border-radius: 12rpx;
      background-color: #fff;
      .item_one1 {
        border-bottom: 2rpx solid #E5E5E5;
        .item_img1 {
          height: 380rpx;
          border-radius: 12rpx 12rpx 0rpx 0rpx;
        }
        .item_text1 {
          font-size: 24rpx;
          font-weight: 400;
          color: rgba(0,0,0,0.85);
          line-height: 36rpx;
        }
        .item_time1 {
          font-size: 22rpx;
          font-weight: 400;
          color: rgba(0,0,0,0.25);
          line-height: 32rpx;
        }
      }
      .item_two1 {
        font-size: 24rpx;
        font-weight: 400;
        color: rgba(0,0,0,0.45);
        line-height: 26rpx;
        padding: 6rpx 20rpx 14rpx;
      }
    }
  }
  .popup_box {
    .type_item1, .type_item2, .type_item3 {
      height: 70rpx;
      line-height: 70rpx;
      text-align: center;
      font-size: 28rpx;
      color: rgba(0,0,0,0.45);
      background: #F5F6F7;
      border-radius: 32rpx;
      padding: 0 32rpx;
      margin-top: 28rpx;
      margin-right: 16rpx;
      &:nth-child(4n) {
        margin-right: 0;
      }
    }
    .type_item1 {
      width: 159rpx;
      padding: 0;
    }
    .type_item2 {
      width: 245rpx;
      padding: 0;
    }
    .type_item3 {
      width: 260rpx;
      padding: 0;
    }
    .active {
      color: #FFFFFF;
      background: #1890ff;
    }
  }
  .popup_icon {
    width: 100vw;
    text-align: right;
    padding-right: 56rpx;
  }
  .pop_btn {
    width: 220rpx;
    height: 80rpx;
    border-radius: 40rpx;
    border: 2rpx solid #FFFFFF;
    font-size: 36rpx;
    font-weight: 400;
    color: #FFFFFF;
    line-height: 80rpx;
    margin-top: 62rpx;
  }
}
</style>
